<template>
  <div class="h-screen w-screen bg-cyan-800 flex justify-center items-center ">
    <div class="demo-progress">
      <el-progress type="dashboard" :percentage="percentage2" :color="colors" />
      <div class="mb-4  flex justify-center ">
        <button @click="Start" class="text-green-600 bg-white-800 h-10 w-20  rounded-full 
          hover:border-black-500">Start</button>
        <button @click="Stop" class=" text-red-600 bg-white-800 h-10 w-20 hover:border-black-500"
          rounded-full>Stop</button>
        <button @click="Reset" class="text-blue-600 bg-white-800 h-10 w-20 hover:border-black-500"
          rounded-full>Reset</button>
      </div>
      <div>
        <div>
          <router-link to="/">
            <h2 class="flex justify-center text-green-600 font-mono hover:underline">继续学习</h2>
          </router-link>
        </div>
        <router-view></router-view>
        <div class="flex justify-center items-center ">Made with ❤ by ZombieQ</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'

const percentage2 = ref(0)

const colors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 },
]

const timer = ref()

onMounted(() => {
  timer.value = setInterval(() => {
    percentage2.value = (percentage2.value % 100) + 1
  }, 3000)
}
)

watch(percentage2, (oldValue) => {
  if (oldValue == 100) {
    alert("休息结束~")
  }
})

const Stop = () => {
  window.clearInterval(timer.value)
}

const Start = () => {
  timer.value = setInterval(() => {
    percentage2.value = (percentage2.value % 100) + 1
  }, 3000)
}

const Reset = () => {
  percentage2.value = 0
}

</script>
<style  >
.demo-progress .el-progress--line {
  margin-bottom: 15px;

}

.demo-progress .el-progress--circle {
  margin-right: 15px;
}

.demo-progress .el-progress-circle {
  height: 500px !important;
  width: 500px !important
}

.demo-progress .el-progress__text {
  font-size: 30px;
  align-items: center;
}

.demo-progress .el-progress__text {
  font-size: 60px !important;
  text-align: center;
}
</style>
